<template>
  <div class="search-line" flex>
    <p text-14>任务名称:</p>
    <n-input v-model:value="name" type="text" placeholder="请输入" />
    <p text-14>任务日期:</p>
    <n-date-picker id="dp" v-model:value="timestamp" type="date" clearable />
    <p text-14>金额:</p>
    <n-input v-model:value="amount" type="text" placeholder="请输入" />
    <p v-if="is" text-14>任务状态:</p>
    <n-select v-if="is" v-model:value="state" :options="state_options" />
    <p text-14>任务类型:</p>
    <n-select v-model:value="type" :options="type_options" />
    <!-- <n-button class="btn" type="info" @click="search">搜索</n-button> -->
    <n-button class="btn" type="info" @click="$emit('searchInfo', info)">搜索</n-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/modules/user'
defineEmits(['searchInfo'])
defineProps(['is'])
const count = ref(0)
const name = ref(null)
const timestamp = ref(null)
const amount = ref(null)
const state = ref(null)
const type = ref(null)
const info = ref({
  create_at: timestamp,
  task_name: name,
  amount: amount,
  type: type,
  state: state,
})
const state_options = [
  {
    label: '所有',
    value: '1',
  },
  {
    label: '已完成',
    value: '2',
  },
  {
    label: '稽核错误',
    value: '3',
  },
  {
    label: '校验中',
    value: '4',
  },
]
const type_options = [
  {
    label: '所有',
    value: 'state0',
  },
  {
    label: '图片分类',
    value: 'state1',
  },
  {
    label: '打点',
    value: 'state2',
  },
  {
    label: '图片打框',
    value: 'state3',
  },
]
const userStore = useUserStore()
</script>

<style lang="scss" scoped>
.search-line {
  width: 90%;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  white-space: nowrap; //
  p {
    margin-left: 10px;
    margin-right: 2px;
  }
}
.btn {
  margin-left: 10px;
}
#dp {
  width: 100%;
}
</style>
